<template>
  <div class="mainBox">
    <div class="container">
        <el-row :gutter="20">
          <el-col :span="4">
            <span></span>
            <el-input style="" v-model="searchParam.keyword" clearable placeholder="账户名称 关键字" @keyup.enter.native="getAccountsListFunc"></el-input>
          </el-col>
          <el-col :span="2" >
            <el-button type="primary" :loading="loading" @click="getAccountsListFunc" size="small" icon="el-icon-search">查询</el-button>
          </el-col>
          <el-col :span="3" :offset="14" >
          </el-col>
        </el-row>
      </div>
      <!--Table -->
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中..."
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          label="No."
          type="index"
          :index="indexMethod"
          width="80"
          align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="账户名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="password"
          label="账户密码"
          align="center">
        </el-table-column>
        <el-table-column
          prop="proxy_ip"
          label="代理IP"
          align="center">
        </el-table-column>
        <el-table-column
          prop="create_at"
          label="创建时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="update_at"
          label="更新时间"
          align="center">
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div v-show="total" class="pagination-container" style="margin-top: 20px;">
        <el-pagination
          background
          class="pagination-container" style="margin-top: 20px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchParam.page"
          :page-sizes="[10,20,50,100]"
          :page-size="searchParam.per_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
  </div>
</template>

<script>
import {getAccountsList} from '@/api/accounts'
import { mapGetters } from 'vuex'
export default{
  data() {
    return {
      tableData:[]
      ,loading: true
      ,total:0
      ,searchParam:{
        page: 1,
        per_page: 10,
        keyword: ''
      }
    }
  },
  created(){
    this.getAccountsListFunc()
  },
  methods: {
    //获取代理池list
    getAccountsListFunc(){
      this.loading = true
      getAccountsList(this.searchParam, response=> {
        const res = response.data
        if(res.code == 1){
          this.tableData = (res.data).items
          this.total = (res.data).total
          if((res.data).page > (res.data).pages && (res.data).pages !== 0){
            this.searchParam.page = (res.data).pages
            this.getAccountsListFunc()
          }
        }
        this.loading = false
      })
    },
   
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.searchParam.per_page = val;
      this.getAccountsListFunc();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.searchParam.page = val;
      this.getAccountsListFunc();
    },
    indexMethod(index) {
      let No = (this.searchParam.page -1) * this.searchParam.per_page
      return No + (index + 1)
    }
  },
  filters:{
  },
  components:{
  },
  computed: {
      ...mapGetters([
      'roles'
      ])
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .mainBox{
    padding: 0px;
    margin-bottom: 20px;
  }
  .container {
    margin: 10px 0px;
  }
</style>
